<template>
  <div class="home">
    <nav-bar class="home-nav-bar">
      <div slot="left" class="left-city" @click="cityClick">
        {{ city }}
      </div>
      <div class="center_search" slot="center" @click="searchClick">
        <van-search placeholder="请输入搜索关键词" />
      </div>
    </nav-bar>
    <div id="allmap"></div>
    <home-banner :banner="banner"></home-banner>
    <channel :channel="channel"></channel>
    <floor class="floors" @click.native="brandClick">
      <div slot="title" class="news-top">品牌制造商直供</div>
    </floor>
    <brand-list :brandList="brandList"></brand-list>
    <floor
      @click.native="newClick"
      colorStyle="#F1F7FD"
      colorActives="#909FB1"
      class="floor-news"
    >
      <div slot="title" class="news-top">新品首发</div>
      <div slot="desc" class="news-top main-button">查看全部</div>
    </floor>
    <new-goods :newGoods="newGoods"></new-goods>
    <floor
      @click.native="hotClick"
      colorStyle="#FEF7E3"
      colorActives="#B1A279"
      class="floor-news"
    >
      <div slot="title" class="news-top">人气推荐, 好物精选</div>
      <div slot="desc" class="news-top main-button main-button-recommend">
        查看全部
      </div>
    </floor>
    <new-goods :newGoods="hotGoods"></new-goods>
    <floor class="floors">
      <div slot="title" class="news-top">专题精选</div>
      <van-icon slot="icon" name="arrow" class="floor-icon1" />
    </floor>
    <top-list :newGoods="topicList"></top-list>
    <new-cate-gory :newCategoryList="newCategoryList"></new-cate-gory>
  </div>
</template>

<script>
import { getIndex } from "@/network/home";
import NavBar from "@/components/navbar/NavBar.vue";
import HomeBanner from "./children/HomeBanner";
import Channel from "./children/Channel";
import Floor from "./children/Floor";
import BrandList from "./children/BrandList";
import NewGoods from "./children/NewGoods";
import TopList from "./children/TopList";
import NewCateGory from "./children/NewCateGory";
export default {
  name: "Home",
  components: {
    NavBar,
    HomeBanner,
    Channel,
    Floor,
    BrandList,
    NewGoods,
    TopList,
    NewCateGory,
  },
  data() {
    return {
      city: null,
      banner: [],
      channel: [],
      brandList: [],
      newGoods: [],
      hotGoods: [],
      topicList: [],
      newCategoryList: [],
    };
  },
  created() {
    this.homeData();
    // this.getGoodLists()
  },
  methods: {
    // 跳到brand 页面
    brandClick() {
      this.$router.push({
        path: '/brandlist'
      })
    },
    searchClick() {
      // console.log(12)
      this.$router.push({
        path: '/search'
      })
    },
    newClick() {
      this.$router.push({
        path: "/newgoods",
        query: {
          isNew: 1,
        },
      });
    },
    // 跳到hot页面
    hotClick() {
      this.$router.push({
        path: "/newgoods",
        query: {
          isHot: 1,
        },
      });
    },
    homeData() {
      getIndex().then((res) => {
        console.log(res);
        this.banner = res.banner;
        this.channel = res.channel;
        this.brandList = res.brandList;
        this.newGoods = res.newGoods;
        this.hotGoods = res.hotGoods;
        this.topicList = res.topicList;
        this.newCategoryList = res.newCategoryList;
        console.log(this.newCategoryList);
        // console.log(this.banner);
      });
    },
    cityClick() {
      console.log(1);
      this.$router.push({
        path: "/map",
      });
    },
  },

  mounted() {
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(116.331398, 39.897445);
    map.centerAndZoom(point, 12);
    let that = this;
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(
      function (r) {
        console.log(r);
        that.city = r.address.city;
      },
      { enableHighAccuracy: true }
    );
  },
};
</script>

<style lang="scss" scoped>
.home {
  // height: 100vh;
  background-color: #f4f4f4;

  // overflow: hidden;
  .home-nav-bar {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 44px;
    background-color: #fff;
    z-index: 2;
  }

  .floors {
    margin: 10px 0 0;

    .news-top {
      padding: 20px 0;
      background-color: #fff;
    }
  }

  .floor-news {
    height: 130px;
    margin: 0px 0 20px;
    font-size: 16px;

    .news-top {
      margin-bottom: 10px;
    }

    .main-button {
      padding: 3px 10px;
      font-size: 14px;
      background-color: #d8e4f0;
    }

    .main-button-recommend {
      background-color: #f4e9cb;
    }
  }
}

.left-city {
  font-size: 16px;
}

.center_search {
  .van-search {
    padding: 0;
    margin: auto 0;
  }
}

.floor-icon1 {
  border: 1px solid #959595;
  color: #959595;
  border-radius: 50%;
  padding: 1px;
  margin-left: 5px;
  vertical-align: middle;
}
</style>